<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <hr />
    <ul id="list">
      <li id="g">GGGG</li>
      <li id="s">SSSS</li>
      <li id="a">AAAA</li>
      <li id="e">EEEE</li>
    </ul>
    <script>
      const list = document.getElementById('list');
      // 获取按钮和各个需要用到的元素
      const btn1 = document.getElementById('btn1');
      btn1.addEventListener('click', function () {
        const li = document.createElement('li');
        // 向li中添加文本
        li.textContent = 'TTTT';
        // 向li的添加id属性
        li.id = 't';
        /* 
            appendChild()用于给一个节点添加子节点
            */
        // list.appendChild(li);
        /* 
            insertAdjacentElement()可以向元素的任意位置添加元素
            两个参数,1要添加的位置,2要添加的元素
             beforeend 标签的最后 afterbegin 标签的开始
             beforebegin 在元素前面插入兄弟元素 afterend 在元素的后面插入兄弟元素
        */
    //    list.insertAdjacentElement("beforebegin",li)
        list.insertAdjacentHTML("beforebegin","<li id='t'>TTTT</li>")
      });
      const btn2 = document.getElementById("btn2")
      btn2.addEventListener("click",function(){
        // 创建一个YYYY替换GGGG
        const li = document.createElement("li")
        li.textContent = "YYYY"
        li.id = 'y'
        const g = document.getElementById("g")
        // g.replaceWith(li)
        g.remove()
      })
    </script>
  </body>
</html>
